<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer :title="detailTitle" :visible.sync="drawer" @closed="closedinvitation" size="85%" :wrapperClosable="false">
      <div class="layout" style="position: relative" v-loading="loading">
        <div class="flex-between info-box font14">
          <div class="flex infobox-left">
            <div>
              <div>商户名称：{{ info.name }}</div>
              <div>商户状态：{{ info.status }}</div>
            </div>
            <div class="marginLeft40">
              <div>联系人：{{ info.contact }}</div>
              <div>联系电话：{{ info.tel }}</div>
            </div>
          </div>
          <div class="infobox-right">售后单号：s2393761718</div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单详情" name="first">
            <div class="margin20">
              <el-descriptions :column="2">
                <el-descriptions-item label="商品分类">{{ product.sort }}</el-descriptions-item>
                <el-descriptions-item label="供货商">{{ product.shop }}（id：{{ product.id }}）</el-descriptions-item>
                <el-descriptions-item label="商品名称">
                  <span style="font-weight: 600;">{{ product.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="商品规格">{{ product.rule }}</el-descriptions-item>
                <el-descriptions-item label="商品图片">
                  <el-image :src="product.image" style="width: 50px;height: 50px;border-radius: 4px;"></el-image>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="blockquote-box">自提订单信息</div>
            <div class="margin20">
              <el-descriptions :column="2">
                <el-descriptions-item label="自提编号">
                  <span style="color: #409EFF;">675556678666</span>
                </el-descriptions-item>
                <el-descriptions-item label="自提时间">2024-01-13 12:13:13</el-descriptions-item>
                <el-descriptions-item label="自提数量">10</el-descriptions-item>
                <el-descriptions-item label="自提总额">100.00提货券</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="物流信息" name="second">
            <div class="margin20">
              <el-descriptions :column="2">
                <el-descriptions-item label="商品分类">{{ product.sort }}</el-descriptions-item>
                <el-descriptions-item label="供货商">{{ product.shop }}（id：{{ product.id }}）</el-descriptions-item>
                <el-descriptions-item label="商品名称">
                  <span style="font-weight: 600;">{{ product.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="商品规格">{{ product.rule }}</el-descriptions-item>
                <el-descriptions-item label="商品图片">
                  <el-image :src="product.image" style="width: 50px;height: 50px;border-radius: 4px;"></el-image>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="blockquote-box">物流信息</div>
            <div class="margin20">
              <el-descriptions :column="2">
                <el-descriptions-item label="快递单号">
                  <span style="color: #409EFF;">sf675556678666</span>
                </el-descriptions-item>
                <el-descriptions-item label="快递名称">顺丰</el-descriptions-item>
                <el-descriptions-item label="收货人">xxx</el-descriptions-item>
                <el-descriptions-item label="联系电话">
                  <span>{{ tel }}</span><span @click="showtel()" style="margin-left: 10px;"><i
                      class="el-icon-view"></i></span>
                </el-descriptions-item>
                <el-descriptions-item label="收货地址">北京市 朝阳区 大望路 111号</el-descriptions-item>
                <el-descriptions-item label="物流明细">
                  <span>点击查看</span>
                  <i class="el-icon-truck" style="margin-left: 10px;"></i>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="售后信息" name="third">
            <div class="margin20">
              <el-descriptions :column="2">
                <el-descriptions-item label="商品分类">{{ product.sort }}</el-descriptions-item>
                <el-descriptions-item label="供货商">{{ product.shop }}（id：{{ product.id }}）</el-descriptions-item>
                <el-descriptions-item label="商品名称">
                  <span style="font-weight: 600;">{{ product.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="商品规格">{{ product.rule }}</el-descriptions-item>
                <el-descriptions-item label="商品图片">
                  <el-image :src="product.image" style="width: 50px;height: 50px;border-radius: 4px;"></el-image>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="blockquote-box flex-between">
              <div>售后信息</div>
              <div><el-button type="text" icon="el-icon-document" @click="ifshow = true">售后历史</el-button></div>
            </div>
            <div class="margin20">
              <el-descriptions :column="2">
                <el-descriptions-item label="申请时间">{{ sh.time }}</el-descriptions-item>
                <el-descriptions-item label="退款方式">{{ sh.way }}</el-descriptions-item>
                <el-descriptions-item label="退货数量">{{ sh.num }}</el-descriptions-item>
                <el-descriptions-item label="退款总额">{{ sh.price }}</el-descriptions-item>
                <el-descriptions-item label="售后原因">{{ sh.reason }}</el-descriptions-item>
                <el-descriptions-item label="申请说明">{{ sh.info }}</el-descriptions-item>
              </el-descriptions>
              <!-- 根据审核状态判断是否显示审核信息和审核按钮 -->
              <el-divider></el-divider>
              <el-descriptions :column="2">
                <el-descriptions-item label="审核结果">{{ sh.reason }}</el-descriptions-item>
                <el-descriptions-item label="审核说明">{{ sh.info }}</el-descriptions-item>
                <el-descriptions-item label="审核人员">{{ sh.reason }}</el-descriptions-item>
                <el-descriptions-item label="审核时间">{{ sh.info }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="display: flex;justify-content: flex-end;margin-right:20px;">
              <el-button type="primary" plain @click="check('1')">审核驳回</el-button>
              <el-button type="primary" @click="check('2')">审核通过</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <history v-if="ifshow"></history>
  </div>
</template>
<script>
import history from './history.vue'
export default {
  name: "detail",
  props: [
    "detailTitle",
    "status",
    "regionList",
    "groupingList",
    "TagCategoryAll",
    "gradeList",
  ],
  components: {
    history,
  },
  data() {
    return {
      loading: false,
      id: "",
      drawer: true,
      detailtitle: "",
      activeName: "first",
      info: {
        name: 'xxx商户',
        contact: 'xxx',
        tel: '18888888888',
        status: '已认证'
      },
      product: {
        sort: '服装-女装',
        shop: '供货商名称',
        id: '2333',
        name: '商品名称',
        rule: '黄色-s码',
        image: 'https://mj-1320609740.cos.ap-nanjing.myqcloud.com/2023-11/29/090032_27092.jpeg'
      },
      tel: '188********',
      ifshowtel: false,
      sh: {
        time: '2024-01-13 12:13:13',
        way: '提货券',
        num: '10',
        price: '1000.00',
        reason: '质量问题',
        info: '因为质量问题需要平台售后'
      },
      ifshow: false
    }
  },
  mounted() { },
  methods: {
    // 关闭添加抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
    closedetail() {
      this.ifshow = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    showtel() {
      this.ifshowtel = !this.ifshowtel;
      if (this.ifshowtel == true) {
        this.tel = '18888888888'
      } else {
        this.tel = '188********'
      }
    },
    check(type) {
      if (type == 1) {
        this.$prompt('请填写驳回原因', '审核驳回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '驳回原因: ' + value
          });
        }).catch(() => {
        });
      } else {
        this.$prompt('请填写通过原因', '审核通过', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '通过原因: ' + value
          });
        }).catch(() => {
        });
      }

    }
  }
};
</script>
<style lang="scss">
.drawer-layout {

  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }
  }
}
</style>
<style lang="scss" scoped>
.margin20 {
  margin: 20px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
}

.marginLeft40 {
  margin-left: 40px;
}

.font14 {
  font-size: 14px;
}

.blockquote-box {
  border-left: 4px solid #409eff;
  padding: 0 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 14px;
}

.info-box {
  margin: 10px 20px;
  border: 1px solid #ededed;
  padding: 10px 10px;
  border-radius: 3px;

  .infobox-left>div>div:first-child {
    margin-bottom: 20px;
  }

  .infobox-right {
    color: #9a9a9a;
  }
}
</style>